(function () {
  let vm = new Vue({
    el: '.todoapp',
    data: {
      list: [],
      name: '',
      nowId: -1,
      type: 'all'
    },
    methods: {
      getList() {
        axios({
          method: 'get',
          url: 'http://localhost:3000/list?_sort=id&_order=desc',
        })
          .then(res => {
            this.list = res.data
          })
          .catch(() => {
            console.log('请求失败');
          })
      },
      add() {
        if (!this.name.trim()) return
        axios({
          method: 'post',
          url: 'http://localhost:3000/list',
          data: {
            name: this.name,
            flag: false
          }
        })
          .then(() => {
            this.getList()
          })
        this.name = ''
      },
      del(id) {
        axios({
          method: 'delete',
          url: `http://localhost:3000/list/${id}`
        })
          .then(() => {
            this.getList()
          })
      },
      showEdit(id) {
        this.nowId = id
      },
      edited(id) {
        axios({
          method: 'patch',
          url: `http://localhost:3000/list/${id}`,
          data: {
            name: this.list.find(item => item.id == id).name
          }
        })
          .then(() => {
            this.getList()
          })
        this.nowId = -1
      },
      clearComplated() {
        this.list.forEach((item, id) => {
          if (item.flag) {
            axios({
              method: 'delete',
              url: `http://localhost:3000/list/${item.id}`
            })
              .then(() => {
                this.getList()
              })
          }
        })
      },
      change(type) {
        this.type = type
      },
      changeState(id) {
        console.log(id);

        console.log(this.list.find(item => item.id == id).flag);

        axios({
          method: 'patch',
          url: `http://localhost:3000/list/${id}`,
          data: {
            flag: this.list.find(item => item.id == id).flag
          }
        })
      }
    },
    computed: {
      unfinishedNum() {
        return this.list.filter(item => !item.flag).length
      },
      showList() {
        switch (this.type) {
          case 'all':
            return this.list
            break;
          case 'active':
            return this.list.filter(item => !item.flag)
            break;
          case 'complated':
            return this.list.filter(item => item.flag)
            break;
          default:
            break;
        }
      },
      toggleChecked: {
        get() {
          return this.list.every(item => item.flag)
        },
        set(value) {
          this.list.forEach((item) => {
            axios({
              method: 'patch',
              url: `http://localhost:3000/list/${item.id}`,
              data: {
                flag: value
              }
            })
              .then(() => {
                this.getList()
              })
          })

        }
      }
    },
    created() {
      this.getList()
    }
  })
})()